<template>
  <div id="sysMenu">
    <div class="addUserButton" style="margin: 5px; padding: 5px;">
      <el-button type="success" round @click="addShow">+ 添加</el-button>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'children' }"
    >
      <el-table-column prop="title" label="菜单标题" />
      <el-table-column prop="component" label="路由名称" />
      <el-table-column prop="sortValue" label="排序" />
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          <div v-if="scope.row.status === 1">
            <el-button type="success" disabled>正常</el-button>
          </div>
          <div v-else>
            <el-button type="info" disabled>失效</el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="addChildrenShow(scope.row.id)">
            添加子路由
          </el-button>
          <el-button type="warning" @click="updateShow(scope.row)">
            修改
          </el-button>
          <el-button type="danger" @click="deleteMenu(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加菜单表单对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="30%">
      <el-form label-width="120px">
        <el-form-item label="菜单标题">
          <el-input v-model="sysMenu.title" />
        </el-form-item>
        <el-form-item label="路由名称">
          <el-input v-model="sysMenu.component" />
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="sysMenu.sortValue" />
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="sysMenu.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <div v-if="sysMenu.id">
            <el-button type="primary" @click="updateMenu">修改</el-button>
          </div>
          <div v-else>
            <el-button type="primary" @click="addMenu">添加</el-button>
          </div>
          <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  doAddMenu,
  doDeleteMenu,
  doUpdateMenu,
  findMenuTree,
} from '@/api/sysMenu'

onMounted(() => {
  showMenuTree()
})

const sysMenu = reactive({
  id: '',
  parentId: '',
  title: '',
  component: '',
  sortValue: '',
  status: '',
})
// 展示菜单树
const showMenuTree = async () => {
  console.log('showTree被执行')
  const { code, data, message } = await findMenuTree()
  if (code === 200) {
    tableData.value = data
  } else {
    ElMessage.error(message)
  }
}
//TODO 2025/1/5 根据懒加载，优化系统菜单页面
//TODO 2025/1/5 优化所有的时间
// 加载子节点
const load = (row: any, treeNode: any, resolve: (data: any) => void) => {
  setTimeout(() => {
    resolve(row.children)
  }, 500)
}

const tableData = ref([])
const dialogVisible = ref(false)
const dialogTitle = ref('添加或修改')
const addChildrenShow = id => {
  addShow()
  sysMenu.parentId = id
}
const addShow = () => {
  sysMenu.id = ''
  sysMenu.status = ''
  sysMenu.title = ''
  sysMenu.parentId = ''
  sysMenu.sortValue = ''
  sysMenu.component = ''
  dialogTitle.value = '添加'
  dialogVisible.value = true
}

const updateShow = row => {
  sysMenu.id = row.id
  sysMenu.status = row.status
  sysMenu.title = row.title
  sysMenu.parentId = row.parentId
  sysMenu.sortValue = row.sortValue
  sysMenu.component = row.component
  // console.log(row)
  // console.log(sysMenu)
  dialogTitle.value = '修改'
  dialogVisible.value = true
}
const addMenu = async () => {
  const ref = await doAddMenu(sysMenu)
  if (ref.code === 200) {
    ElMessage.success('添加成功')
  } else ElMessage.error(ref.message)
  showMenuTree()
  dialogVisible.value = false
}
const updateMenu = async () => {
  const ref = await doUpdateMenu(sysMenu)
  if (ref.code === 200) {
    ElMessage.success('修改成功')
  } else ElMessage.error(ref.message)
  dialogVisible.value = false
  await showMenuTree()
}
const deleteMenu = async id => {
  ElMessageBox.confirm('此操作将永久删除该记录, 是否继续?', 'Warning', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      const ref = await doDeleteMenu(id)
      if (ref.code === 200) {
        ElMessage.success('删除成功')
      } else ElMessage.error(ref.message)
      await showMenuTree()
    })
    .catch(() => {
      ElMessage.info('取消删除')
    })
}
</script>
